<template>
  <div>
    <common-head title="所有联系人"/>
    <div class="wrap">
      <van-address-list
        v-model="choseId"
        :list="contacts"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="choseContact"
      />
      <div v-if="!contacts.length">暂无联系人</div>

    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import CommonHead from '../../components/CommonHead.vue'
export default {
  data () {
    return {
      choseId: -1
    }
  },
  components: {
    CommonHead
  },
  created () {
    this.initChoseId()
  },
  methods: {
    choseContact (contact, index) {
      // 选择联系人
      console.log(contact, index)
      this.set_order_contact(contact)
    },
    initChoseId () {
      // 判断是否为空
      if (!this.contacts.length) {
        this.choseId = -1
      }
      const defaultContact = this.contacts.find(contact => contact.isDefault)
      if (defaultContact) {
        this.choseId = defaultContact.id
      } else {
        this.choseId = this.contacts[0].id
      }
    },
    onAdd () {
      // 添加联系人
      this.$router.push('/contactAdd')
    },
    onEdit (contact, index) {
      // 编辑联系人
      this.$router.push({
        path: '/contactEdit',
        query: {
          index
        }
      })
    },
    ...mapMutations('order', ['set_order_contact'])
  },
  computed: {
    ...mapState({
      contacts: state => state.contact.contacts
    })

  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
}
</style>
